import { useState } from "react"

/* 

包含表单的组件:  非受控组件
不定义state, 在点击提交按钮时, 直接读取input标签的value来收集数据
要用useRef技术

包含表单的组件:  受控组件
  实时收集输入数据(将页面输入的数据自动保存到state中) => 数据流向: 页面=>state
  根据state数据动态显示输入框(初始/更新) => 数据流向: state => 页面

  双向数据绑定
    数据流向1: state => 页面
    数据流向2: 页面=>state
  编码流程
    1. 定义state
    2. 给input绑定Change事件监听, 在回调中将最新输入值保存到对应的state中
    3. 将state数据, 传递给input的value属性

比较:
  非受控组件:
    优点: 更直接, 好理解
    缺点: 收集数据不是自动实时的, 不能进行表单校验
  受控组件
    优点: 自动实时数据, 方便进行表单校验
        双向数据绑定效果, 能根据state数据进行动态显示

表单校验
      用户名不能大于6位 => 如何在输入过程中进行检查
*/
export default function FormTest2() {

  // 1. 定义state
  const [name, setName] = useState('admin')
  const [pwd, setPwd] = useState('111111')

  const handleNameChange = (e) => {
    const name = e.target.value
    setName(name)
    // 进行表单校验
    // if (name.length>6) {
    //   alert('用户名不能大于6位')
    // }
  } 
  const handlePwdChange = (e) => {
    setPwd(e.target.value)
  } 

  /* 
  高阶函数 => 柯里化函数
  */
  const handleChange = (setFun) => {
    return (e) => {
      setFun(e.target.value)
    }
  }

  /* 
  在外面包一个事件回调函数 e => handleChange2(setXxx, e)
  */
  const handleChange2 = (setFun, e) => {
    setFun(e.target.value)
  }

  const login = (e) => {
    // 不想提交表单 => 阻止事件的默认行为
    e.preventDefault()

    // 发登陆请求, 提交name和pwd
    alert(`发登陆请求: name=${name}, pwd=${pwd}`)
  }

  return (
    <div>
      <form action="/xxx">
        <h2>登陆页面(受控组件)</h2>
        {/* 2. 给input绑定Change事件监听, 在回调中将最新输入值保存到对应的state中 */}
        用户名: <input type="text" value={name} onChange={handleNameChange}/> <br/>
        密  码: <input type="password" value={pwd} onChange={handlePwdChange}/> <br/>
        {/* 点击提交按钮, 默认行为是提交表单(页面就会刷新) */}
        <input type="submit" value="登 陆" onClick={login}/>
      </form>
      <button onClick={() => {
        // setName(name + '--')
        setName(val => val + '--')
        // setPwd(pwd + '++')
        setPwd(val => val + '++')
      }}>更新name和pwd</button>

      <form action="/xxx">
        <h2>登陆页面(受控组件2)</h2>
        {/* 2. 给input绑定Change事件监听, 在回调中将最新输入值保存到对应的state中 */}
        用户名: <input type="text" value={name} onChange={handleChange(setName)}/> <br/>
        密  码: <input type="password" value={pwd} onChange={handleChange(setPwd)}/> <br/>
        {/* 点击提交按钮, 默认行为是提交表单(页面就会刷新) */}
        <input type="submit" value="登 陆" onClick={login}/>
      </form>

      <form action="/xxx">
        <h2>登陆页面(受控组件2)</h2>
        {/* 2. 给input绑定Change事件监听, 在回调中将最新输入值保存到对应的state中 */}
        用户名: <input type="text" value={name} onChange={e => handleChange2(setName, e)}/> <br/>
        密  码: <input type="password" value={pwd} onChange={e => handleChange2(setPwd, e)}/> <br/>
        {/* 点击提交按钮, 默认行为是提交表单(页面就会刷新) */}
        <input type="submit" value="登 陆" onClick={login}/>
      </form>
    </div>
  )
}
